import { useEffect } from 'react';
import { ShieldIcon, EyeIcon, CookieIcon, MailIcon } from 'lucide-react';

const Privacy = () => {
  useEffect(() => {
    document.title = 'Privacy Policy | TronoraHub';
  }, []);
  return <div className="w-full bg-[#0d0d10] pt-24 pb-16">
      <div className="container mx-auto px-4 max-w-4xl">
        {/* Header Section */}
        <div className="text-center mb-12">
          <div className="inline-flex items-center justify-center w-16 h-16 bg-[#4361ee]/10 rounded-full mb-6">
            <ShieldIcon className="w-8 h-8 text-[#4361ee]" />
          </div>
          <h1 className="text-3xl md:text-4xl font-bold font-display mb-4 gradient-text">
            Privacy Policy
          </h1>
          <p className="text-[#8a8f98] text-lg">
            Your privacy is important to us. Learn how we protect your data.
          </p>
          <p className="text-[#8a8f98] text-sm mt-2">
            Last updated: {new Date().toLocaleDateString()}
          </p>
        </div>

        {/* Content Cards */}
        <div className="space-y-8">
          {/* Introduction */}
          <div className="card p-8">
            <div className="flex items-center mb-4">
              <div className="w-10 h-10 bg-[#4361ee]/10 rounded-lg flex items-center justify-center mr-4">
                <span className="text-[#4361ee] font-bold">1</span>
              </div>
              <h2 className="text-2xl font-bold font-display">Introduction</h2>
            </div>
            <p className="text-[#8a8f98] leading-relaxed">
              TronoraHub ("we," "our," or "us") is committed to protecting your
              privacy. This Privacy Policy explains how your personal information
              is collected, used, and disclosed by TronoraHub.
            </p>
          </div>

          {/* Information Collection */}
          <div className="card p-8">
            <div className="flex items-center mb-4">
              <div className="w-10 h-10 bg-[#06d6a0]/10 rounded-lg flex items-center justify-center mr-4">
                <EyeIcon className="w-5 h-5 text-[#06d6a0]" />
              </div>
              <h2 className="text-2xl font-bold font-display">Information We Collect</h2>
            </div>
            <p className="text-[#8a8f98] leading-relaxed mb-6">
              We may collect information that identifies, relates to, describes,
              is reasonably capable of being associated with, or could reasonably
              be linked to you ("personal information").
            </p>
            
            <div className="grid md:grid-cols-2 gap-6">
              <div className="bg-[#151518] p-6 rounded-lg">
                <h3 className="text-lg font-semibold text-white mb-3">Information You Provide</h3>
                <ul className="space-y-2 text-[#8a8f98]">
                  <li className="flex items-start">
                    <span className="w-2 h-2 bg-[#4361ee] rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    Contact information (name, email address)
                  </li>
                  <li className="flex items-start">
                    <span className="w-2 h-2 bg-[#4361ee] rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    Profile information (username and password)
                  </li>
                  <li className="flex items-start">
                    <span className="w-2 h-2 bg-[#4361ee] rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    Feedback and correspondence
                  </li>
                  <li className="flex items-start">
                    <span className="w-2 h-2 bg-[#4361ee] rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    Usage information
                  </li>
                  <li className="flex items-start">
                    <span className="w-2 h-2 bg-[#4361ee] rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    Marketing preferences
                  </li>
                </ul>
              </div>
              
              <div className="bg-[#151518] p-6 rounded-lg">
                <h3 className="text-lg font-semibold text-white mb-3">Automatically Collected</h3>
                <ul className="space-y-2 text-[#8a8f98]">
                  <li className="flex items-start">
                    <span className="w-2 h-2 bg-[#06d6a0] rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    Device and usage information
                  </li>
                  <li className="flex items-start">
                    <span className="w-2 h-2 bg-[#06d6a0] rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    IP address and location data
                  </li>
                  <li className="flex items-start">
                    <span className="w-2 h-2 bg-[#06d6a0] rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    Browser characteristics
                  </li>
                  <li className="flex items-start">
                    <span className="w-2 h-2 bg-[#06d6a0] rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    Cookies and tracking data
                  </li>
                </ul>
              </div>
            </div>
          </div>

          {/* How We Use Information */}
          <div className="card p-8">
            <div className="flex items-center mb-4">
              <div className="w-10 h-10 bg-[#4361ee]/10 rounded-lg flex items-center justify-center mr-4">
                <span className="text-[#4361ee] font-bold">3</span>
              </div>
              <h2 className="text-2xl font-bold font-display">How We Use Your Information</h2>
            </div>
            <p className="text-[#8a8f98] leading-relaxed">
              We use your personal information for these purposes in reliance on
              our legitimate business interests, in order to enter into or perform
              a contract with you, with your consent, and/or for compliance with
              our legal obligations.
            </p>
          </div>

          {/* Cookies Policy */}
          <div className="card p-8">
            <div className="flex items-center mb-4">
              <div className="w-10 h-10 bg-[#06d6a0]/10 rounded-lg flex items-center justify-center mr-4">
                <CookieIcon className="w-5 h-5 text-[#06d6a0]" />
              </div>
              <h2 className="text-2xl font-bold font-display">Cookies Policy</h2>
            </div>
            <p className="text-[#8a8f98] leading-relaxed">
              We use cookies and similar tracking technologies to track activity
              on our Service and store certain information. You can instruct your
              browser to refuse all cookies or to indicate when a cookie is being
              sent.
            </p>
          </div>

          {/* Contact Section */}
          <div className="card p-8 bg-gradient-to-r from-[#4361ee]/5 to-[#06d6a0]/5 border border-[#4361ee]/20">
            <div className="flex items-center mb-4">
              <div className="w-10 h-10 bg-[#4361ee]/10 rounded-lg flex items-center justify-center mr-4">
                <MailIcon className="w-5 h-5 text-[#4361ee]" />
              </div>
              <h2 className="text-2xl font-bold font-display">Contact Us</h2>
            </div>
            <p className="text-[#8a8f98] leading-relaxed">
              If you have questions or concerns about this Privacy Policy, please
              contact us at: 
              <a href="mailto:privacy@tronorahub.com" className="text-[#4361ee] hover:text-[#06d6a0] ml-1">
                privacy@tronorahub.com
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>;
};

export default Privacy;